<template>
  <view class="footprint">
		<view v-if="true" class="yt-list" :class="'bgx-' + themeColor.name">
				<view class="yt-list-cell b-t" v-if="true">
					<text class="cell-tit clamp">{{watchChart.startDate}}{{watchChart.startDate && watchChart.endDate ? '~' : '' }}{{watchChart.endDate}}周报</text>
					<view class="cell-tip">
						<radio-group @change="handleChange">
							<label
								class="gender-item"
							>
								<radio
									value="1"
									checked
									style="transform:scale(0.7)"
									:color="themeColor.color"
								/>
								<text class="gender-item-text">本周</text>
							</label>
							<label
								class="gender-item"
							>
								<radio
									value="2"									style="transform:scale(0.7)"
									class="gender-item-radio"
									:color="themeColor.color"
								/>
								<text class="gender-item-text">上周</text>
							</label>
						</radio-group>
					</view>
				</view>			
		
		</view>	
  
	  
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">历史记录</view>
		</view>
		<view class="qiun-charts" >
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
			<!--#endif-->
		</view>
	</view>
	
	
		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>	
 </view>	
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import { getHealthDayList,getHealthParam,getWatchChartData } from '@/api/userInfo';
	import  { isJSON } from '@/common/checker.js';
	import moment from '@/common/moment';	
	import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';		
	var _self;
	var canvaColumn=null;
	
	export default {
		components:[
			rfLoadMore,
		],
		data() {
			return {
				watchChart : {
					startDate : '',
					endDate : '',
				},
				weekType : 1,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				page : 1,
				historyList : [],
				chartData : {},
				loading : true,
				loadingType : 'more',
				healthParamStr : '',
				size : [
					{type : '血压', num : 3 },
					{type : '血糖', num : 2 },
					{type : '心率', num : 1 },
					{type : '运动', num : 2 },
					{type : '尿酸', num : 1 },
					{type : '体质', num : 3 },
					{type : '血氧', num : 2 },
					{type : '胆固醇', num : 1 },
					{type : '体温', num : 1},
				]				
			}
		},
		filters:{
			filterType(val){
			   let gaugeType='系统录入';
			   if(val==1)
					gaugeType='健康一体机';
			   else if(val==5)
					gaugeType='血压计';
			   else if(val==6)
					gaugeType='sdcc腕表';
			   return gaugeType;
									
			}
		},
		onLoad(opition) {	
			this.type  = opition.type;
			this.cstmId = opition.id;
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			if(this.type==='血压'){
				this.testType = 1;
			}else if(this.type==='血糖'){
				this.testType = 3;
			}else if(this.type==='心率'){
				this.testType = 10;
			}else if(this.type==='运动'){
				this.testType = 4;
			}else if(this.type==='尿酸'){
				this.testType = 8;
			}else if(this.type==='体质'){
				this.testType = 2;
			}else if(this.type==='血氧'){
				this.testType = 6;
			}else if(this.type==='胆固醇'){
				this.testType = 7;
			}else if(this.type==='体温'){
				this.testType = 5;
			}else if(this.type==='尿常规'){
				this.testType = 9;
			}
			uni.setNavigationBarTitle({
				title: this.type
			})
			//this.getHealthParam();
			this.getServerData();
			
		},
		onPullDownRefresh() {
			this.page = 1; 
			this.historyList = [];
			this.chartData = {};
			this.getServerData('refresh');
		},
		onReachBottom() {
			this.page++;
			this.getServerData();
		},
		methods: {
			handleChange(e){
				console.log("选择: " + JSON.stringify(e));
				this.weekType = e.detail.value;
				this.getServerData();
				
			},
			getHealthParam(){
								if(this.type==='血压'){
									this.healthParamStr =`正常值：高压(${uni.getStorageSync('XY_GY_MIN')}~${uni.getStorageSync('XY_GY_MAX')})、低压(${uni.getStorageSync('XY_DY_MIN')}~${uni.getStorageSync('XY_DY_MAX')})、脉搏(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`
								}else if(this.type==='血糖'){
									this.healthParamStr =`正常值：餐前(${uni.getStorageSync('XT_KF_MIN')}~${uni.getStorageSync('XT_KF_MAX')})、餐后(${uni.getStorageSync('XT_CH_MIN')}~${uni.getStorageSync('XT_CH_MAX')})`
								}else if(this.type==='心率'){
									this.healthParamStr =`正常值：心率(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`
								}else if(this.type==='运动'){
									this.healthParamStr =``
								}else if(this.type==='尿酸'){
									this.healthParamStr =`正常值：尿酸(${uni.getStorageSync('NS_UMOL_MIN')}~${uni.getStorageSync('NS_UMOL_MAX')})`
								}else if(this.type==='体质'){
									this.healthParamStr =``
								}else if(this.type==='血氧'){
									this.healthParamStr =`正常值：血氧(${uni.getStorageSync('XY_MIN')}~${uni.getStorageSync('XY_MAX')})、脉搏(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`
								}else if(this.type==='胆固醇'){
									this.healthParamStr =`正常值：总胆固醇(${uni.getStorageSync('DGC_MIN')}~${uni.getStorageSync('DGC_MAX')})`
								}else if(this.type==='体温'){
									this.healthParamStr =`正常值：体温(${uni.getStorageSync('TW_MIN')}~${uni.getStorageSync('TW_MAX')})`
								}else if(this.type==='尿常规'){
									this.healthParamStr =`正常值：酸碱度PH(${uni.getStorageSync('NCG_PH_MIN')}~${uni.getStorageSync('NCG_PH_MAX')})、比重(${uni.getStorageSync('NCG_SG_MIN')}~${uni.getStorageSync('NCG_SG_MAX')})`
								}				
			},
			getServerData(type){
				let params ={
						cstmId : this.cstmId,
						type: this.weekType					
				};
				console.log("请求参数: " + JSON.stringify(params));

				 this.$http
				.get(`${getWatchChartData}`, params)
				.then(r => {
					this.loading = false;
					if (type === 'refresh') {
					 	uni.stopPullDownRefresh();
					}
					console.log("r.data: " + JSON.stringify(r.data));
					
					this.watchChart = r.data.obj;
											
					let series = [];
					let categories = r.data.obj.dates.split(',');
					let chartData = {};
					let data  = r.data.obj.setps.split(',');//步数数组
					let data2  = r.data.obj.heartRates.split(',');//心率数组
					let data3  = r.data.obj.pressureHs.split(',');//高压数组
					let data4  = r.data.obj.pressureLs.split(',');//低压数组
					
					let serie = {};
					let serie2 = {};
					let serie3 = {};
					let serie4 = {};
					
					serie["name"] = '步数';
					serie["data"] = data;	
					serie2["name"] = '心率';
					serie2["data"] = data2;
					serie3["name"] = '高压';
					serie3["data"] = data3;	
					serie4["name"] = '低压';
					serie4["data"] = data4;	
																									 
					series.push(serie);
					series.push(serie2);
					series.push(serie3);					
					series.push(serie4);
					
					/*this.historyList.forEach((item,index) =>{
                        let gTime = moment(item.gauge_time).format('YYYY-MM-DD');						  
						categories.push(gTime);
						if(this.type==='血压'){
							data.push(item.systolic_pressure);
							data2.push(item.diastolic_pressure);
							data3.push(item.rulse_rate);
						}else if(this.type==='血糖'){
							if(item.conditions===0)
							 data.push(item.blood_glucose);
							else 
							 data2.push(item.blood_glucose);
						}else if(this.type==='心率'){
							data.push(item.avr_heartrate);
						}else if(this.type==='运动'){
							data.push(item.target);
							data2.push(item.actual);
						}else if(this.type==='尿酸'){
							data.push(item.uric_acid);
						}else if(this.type==='体质'){
							data.push(item.weight);
							data2.push(item.height);
							data3.push(item.bmi);							
						}else if(this.type==='血氧'){
							data.push(item.oxygen_saturation);
							data2.push(item.pulse_rate);
						}else if(this.type==='胆固醇'){
							data.push(item.chol);
							
						}else if(this.type==='体温'){
							data.push(item.body_temperature);
							
						}else if(this.type==='尿常规'){
						}							
					 	
					 })
					 
						if(this.type==='血压'){
						 serie["name"] = '高压';
						 serie["data"] = data;	
						 serie2["name"] = '低压';
						 serie2["data"] = data2;
						 serie3["name"] = '脉搏';
						 serie3["data"] = data3;	
																									 
						 series.push(serie);
						 series.push(serie2);
						 series.push(serie3);
						}else if(this.type==='血糖'){
						 serie["name"] = '餐后';
						 serie["data"] = data;	
						 serie2["name"] = '餐前';
						 serie2["data"] = data2;							 
																															  
						 series.push(serie);
						 series.push(serie2);
						}else if(this.type==='心率'){
						 serie["name"] = '心率';
						 serie["data"] = data;	
																																											  
						 series.push(serie);	
						}else if(this.type==='运动'){
						 serie["name"] = '目标';
						 serie["data"] = data;	
						 serie2["name"] = '实际';
						 serie2["data"] = data2;							 
																															  
						 series.push(serie);
						 series.push(serie2);							
						}else if(this.type==='尿酸'){
						 serie["name"] = '尿酸';
						 serie["data"] = data;	
						 																																						  
						 series.push(serie);							
						}else if(this.type==='体质'){
						 serie["name"] = '体重';
						 serie["data"] = data;	
						 serie2["name"] = '身高';
						 serie2["data"] = data2;
						 serie3["name"] = 'BMI';
						 serie3["data"] = data3;	
																									 
						 series.push(serie);
						 series.push(serie2);
						 series.push(serie3);
						}else if(this.type==='血氧'){
							serie["name"] = '血氧值';
							serie["data"] = data;	
							serie2["name"] = '脉搏率';
							serie2["data"] = data2;							 
																																						  
							series.push(serie);
							series.push(serie2);
						}else if(this.type==='胆固醇'){
							serie["name"] = '胆固醇';
							serie["data"] = data;	
						 																																						  
							series.push(serie);
						}else if(this.type==='体温'){
							serie["name"] = '体温';
							serie["data"] = data;	
																																												  
							series.push(serie);
						}else if(this.type==='尿常规'){
							
						}*/					 

										  
					 chartData.series = series;
					 chartData.categories = categories;					 
					 _self.showColumn("canvasColumn",chartData);
					
				})
				.catch(() => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});				
				
				
			},
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					fontSize:11,
					padding:[5,15,15,15],
					legend:{
						show:true,
						position:'top',
						float:'center',
						itemGap:30,
						padding:5,
						margin:5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth :1
					},
					dataLabel:true,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:true,
						scrollAlign:'left',
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:4,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					},
				});
				
			},
			touchColumn(e){
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation:true,
				});
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaColumn.updateData({
						series: newdata.series,
						categories: newdata.categories,
						scrollPosition:'right',
						animation:false
					});
				}else{
					uni.showToast({
						title:'数据格式错误',
						image:'../../../static/images/alert-warning.png'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background: $page-color-base;
}	

.yt-list {
	margin-top: 16upx;
	background: #fff;
	.iconshanchu4 {
		margin-left: $spacing-sm;
	}
}
.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10upx 30upx 10upx 40upx;
	line-height: 70upx;
	position: relative;
	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30upx;
	}

	.cell-icon {
		height: 32upx;
		width: 32upx;
		font-size: 22upx;
		text-align: center;
		line-height: 32upx;
		border-radius: 4upx;
		margin-right: 12upx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24upx;
		color: $font-color-light;
		margin-left: 8upx;
		margin-right: -10upx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26upx;
		color: $font-color-light;
		margin-right: 10upx;
	}

	.cell-tip {
		max-width: 70%;
		font-size: 26upx;
		&.disabled {
			color: $font-color-light;
		}

		&.active {
			color: $base-color;
		}
		&.red {
			color: $base-color;
		}
		.invoice {
			display: flex;
			justify-content: space-between;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90upx;
		}
	}

	.desc {
		flex: 1;
		font-size: $font-base;
		color: $font-color-dark;
	}
}

/*边框*/
.b-b:after,
.b-t:after {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 0;
  content: '';
  transform: scaleY(.5);
  border-bottom: 1px solid $border-color-base;
}

	.input-content {
		padding: 40upx 60upx;

		.input-item {
			display: flex;
			padding: 0 30upx;
			background: $page-color-light;
			height: 80upx;
			line-height: 80upx;
			border-radius: 4px;
			margin-bottom: 30upx;

			&:last-child {
				margin-bottom: 0;
			}

			.tit {
				width: 100upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
			}

			input {
				width: calc(100% - 100upx);
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
			}

			.date {
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
			}

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
 .footprint {
	.row {
		width: calc(94%);
		height: calc(22vw + 40upx);
		margin: 20upx auto;
		border-radius: 15upx;
		box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		border: 0;
		.menu {
			.icon {
				color: #fff;
				font-size: 60upx;
			}
			position: absolute;
			width: 29%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
		}
		.carrier {
			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-30%);
				}
			}
			@keyframes closeMenu {
				0% {
					transform: translateX(-30%);
				}
				100% {
					transform: translateX(0);
				}
			}
			&.open {
				animation: showMenu 0.25s linear both;
			}
			&.close {
				animation: closeMenu 0.15s linear both;
			}
			background-color: #fff;
			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;
			.left {
				width: 22vw;
				height: 22vw;
				margin-left: 20upx;
				margin-right: 10upx;
				position: relative;
				.image {
					border-radius: 10upx;
					width: 22vw;
					height: 22vw;
				}
				.tag {
					position: absolute;
					left: 0;
					top: 0;
					width: 60upx;
					height: 60upx;
				}
			}
			.mid {
				width: 100%;
				margin: 10upx 10upx 0;
				.title {
					height: 60upx;
					line-height: 1.2;
					font-size: $font-base;
				}
				.data {
					width: 100%;
					display: flex;
					align-items: center;
					margin: 10upx 0 5upx;
					font-size: $font-base;
					color: $font-color-base;
					.item {
						flex: 1;
					}
					.iconfont {
						color: $font-color-light;
						margin-right: 10upx;
					}
					.status {
						padding: 6upx 20upx;
						background-color: $base-color;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}
					.normal {
						padding: 6upx 20upx;
						background-color: #4cd964;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}					
				}
				.bottom {
					line-height: 1.2;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: $font-sm;
					color: $font-color-light;
					.price {
						font-size: $font-lg;
					}
				}
			}
		}
	}
}	
	
</style>
